 <template>
    <el-container v-loading="loading">
        <el-card class="container">
            <template #header>
                <div class="form-item"><h1 style="font-size: 1.5rem;">Contact us</h1></div>
            </template>
            <el-form 
                ref="ruleFormRef"
                :model="form" 
                label-width="auto"
                label-position="top"
                class="form"
                status-icon
                :rules="rules"
                >
                <el-col class="form-item" :span="10">
                    <el-form-item label="First Name" prop="firstName">
                        <el-input v-model="form.firstName" placeholder="First Name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col class="form-item" :span="10">
                    <el-form-item label="Last Name" prop="lastName">
                        <el-input v-model="form.lastName" placeholder="Last Name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col class="form-item" :span="10">
                    <el-form-item label="E-mail" prop="email">
                        <el-input v-model="form.email" placeholder="E-mail"></el-input>
                    </el-form-item>
                </el-col>
                <el-col class="form-item" :span="10">
                    <el-form-item label="Subject" prop="subject">
                        <el-input v-model="form.subject" placeholder="Subject"></el-input>
                    </el-form-item>
                </el-col>
                <el-col class="form-item" :span="21">
                    <el-form-item  label="Message" prop="message">
                        <el-input v-model="form.message" placeholder="Message" type="textarea"></el-input>
                    </el-form-item>
                </el-col>
                <el-col class="form-item" :span="21">
                    <el-form-item class="form-item">
                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                            Submit
                        </el-button>
                        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-card>
    </el-container>
</template>

<script lang="ts" setup>
    import { reactive, ref } from 'vue'
    import { type RuleForm } from '@/types/index'
    import type { FormInstance, FormRules } from 'element-plus'
    import { get, post } from '../../axios/api';
    import { ElMessage } from 'element-plus'

    const ruleFormRef = ref<FormInstance>()
    let loading = ref(false)

    const form = reactive<RuleForm>({
        firstName: '',
        lastName: '',
        email: '',
        subject: '',
        message: ''
    })

    const rules = reactive<FormRules<RuleForm>>({
        firstName: [
            {
                required: true,
                message: 'Please input your first name',
                trigger: 'blur'
            }
        ],
        lastName: [
            {
                required: true,
                message: 'Please input your last name',
                trigger: 'blur'
            }
        ],
        email: [
            {
                required: true,
                message: 'Please input your email',
                trigger: 'blur',
                type: 'email'
            }
        ],
        message: [
            {
                required: true,
                message: 'Please input yourmessage',
            }
        ]
    })


    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate(async (valid, fields) => {
            loading.value = true
            if (valid) {
                let res: any = {}
                try {
                    res = await post('/send_email/', form)
                    if (res && res.success) {
                        loading.value = false
                        ElMessage({
                            message: "We have recieved your message, we will contact you as soon as possible!",
                            type: 'success',
                        })
                    }
                } catch (error:any) {
                    loading.value = false
                    ElMessage({
                        message: error,
                        type: 'error',
                    })
                }
            } else {
                loading.value = false
                console.log('error submit!', fields)
            }
        })
    }


    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }
</script>

<style scoped>
    .container {
        margin: auto;
        margin-top: 20px;
        width: 90%;
    }

    .form {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .form-item {
        width: 100%;
        margin: 0 30px;
        /* font-family: SourceSansPro;
        font-size: 2rem; */
    }
</style >